<form action="#" method="post" class="form form-horizontal" [formGroup]="areaForm" (ngSubmit)="onSubmit()">
  <div class="one-form-header"></div>
  <div class="one-form-body">
    <div class="form-group" style="text-align: center;" >
      <div style="display:inline-block;">
        <label for="area_add_areaName" class=" control-label" style="display: inline-block;">合围区名称：</label>
        <div style=" display: inline-block;">
          <input type="hidden" id="id" formControlName="id" name="id">
          <input type="text" class="form-control" placeholder="区域名称" id="area_add_areaName"  formControlName="areaName" >
          <div *ngIf="formErrors.areaName" class="has-error">
            <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.areaName}} </label>
          </div>
        </div>
      </div>
      <div style="display: inline-block;">
        所属站点：
        <div  style="display: inline-block;">
          <select class="multiselect" id="area_add_siteCode" class="form-control" required disabled="ture" formControlName="siteCode">
            <option value="">-- 请选择站点 --</option>
            <option *ngFor="let site of sites" [value]="site.siteCode">{{site.siteName}}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="form-group" style="margin:0 15px;" formArrayName="pointList">
      <div class="one-form-inline" *ngFor="let mapPoint of pointList.controls; let i=index" [formGroupName]="i" style="margin-top: 20px;" >
        <label [for]="'orderNum'+i">点位 {{i + 1}}</label>
        <div class="form-group one-small-width">
          <label [for]="'orderNum'+i">序号:</label>
          <div>
            <input class="form-control" formControlName="orderNum"   maxlength="15" name="orderNum" [id]="'orderNum'+i"  >
            <div *ngIf="formErrors.orderNum" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.orderNum}} </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label [for]="'pointAddress'+i">地址:</label>
          <div>
            <input type="hidden" id="pointId" formControlName="pointId" name="pointId" >
            <input class="form-control" formControlName="pointAddress"   maxlength="100" name="pointAddress" [id]="'pointAddress'+i">
            <div *ngIf="formErrors.pointAddress" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.pointAddress}} </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label [for]="'lon'+i">点位经度: </label>
          <div>
            <input class="form-control" id="lon" formControlName="lon" name="lon" [id]="'lon'+i" >
            <div *ngIf="formErrors.lon" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.lon}} </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label [for]="'lat'+i">点位纬度:</label>
          <div>
            <input class="form-control" id="lat" formControlName="lat" name="lat" [id]="'lat'+i">
            <div *ngIf="formErrors.lat" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.lat}} </label>
            </div>
          </div>
        </div>
        <button  style="display:inline-block;margin: 5px 0;" class="btn btn-success" (click)="remove(i)">删除点位
        </button>
      </div>
      <button class="btn btn-success" (click)="addMapPoint()" type="button">添加点位</button>
    </div>

  </div>
  <div class="one-form-footer">
    <div class="pull-right" style="margin-right: 230px;">
      <button class="btn btn-default" type="reset" (click)="cancelAreaEdit()">取消</button>
      <button class="btn btn-success" type="submit" [disabled]="!areaForm.valid">保存</button>
    </div>
  </div>
</form>

